<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>无线微功耗气体检测报警系统</title>
	<link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="css/index.css" />
	<script type="text/javascript"  th:src="@{/js/jquery.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/index.js}"></script>
	<script>
	// 地图在线 or 离线  (0代表离线，1代表在线)
	 var mapModel = 1;
	 // 地图类型 百度(b) or 天地图(t)
	 var loadMapType = "b";
	</script>
	<!-- <script type="text/javascript" th:src="@{/lib/ol.js}"></script>
	<script type="text/javascript" th:src="@{/js/map-location.js}"></script>
	<script type="text/javascript" th:src="@{/lib/ol-plot.js}"></script>
	<script type="text/javascript" th:src="@{/js/measuretool.js}"></script>
	<script type="text/javascript" th:src="@{/js/baiduMap.js}"></script>
	<script type="text/javascript" th:src="@{/js/historyMap.js}"></script> -->
	<script type="text/javascript" th:src="@{/lib/ol.js}"></script>
<script type="text/javascript" th:src="@{/lib/ol-plot.js}"></script>
<script type="text/javascript" th:src="@{/js/baiduMap.js}"></script>
<script type="text/javascript" th:src="@{/js/tianMap.js}"></script>
<script type="text/javascript" th:src="@{/js/map.js}"></script>
<script type="text/javascript" th:src="@{/js/historyMap.js}"></script>
<script type="text/javascript" th:src="@{/js/utils.js}"></script>
<script type="text/javascript" th:src="@{/js/esm_drag.js}"></script>
	
</head>
<body>
	<div class="body">
		<div class="head">
			<div class="top ca cf">
				<!-- 左侧 -->
				<div class="user fl">
					<div class="userTree ca cf">
						<span class="fl userImg">
							<i class="userIcon"></i>
							<p>admin</p>
						</span>
						<span class="name fl" onclick="changeTenantUnit()">川庆一警队<i class="arrow" ></i></span>
					</div>
					<!-- 隐藏展开单位-->
					<div class="treeHd"  style="display:none;" id="tenantUnitDiv">
						<div class="treeHdBox">
							<div class="treeList current">
								<div class="tlTop">川庆钻探单位</div>
								<div class="listSub" style="display:block;">
									<ul>
										<li>
											<div class="second">一警队</div>
											<div class="three">
												<ol>
													<li class="onlink"><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">二警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">三警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">四警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<div class="treeList">
								<div class="tlTop">川庆钻探单位</div>
								<div class="listSub" style="display:none;">
									<ul>
										<li>
											<div class="second">一警队</div>
											<div class="three">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">二警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">三警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">四警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<div class="treeList">
								<div class="tlTop">川庆钻探单位</div>
								<div class="listSub" style="display:none;">
									<ul>
										<li>
											<div class="second">一警队</div>
											<div class="three">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">二警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">三警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">四警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<div class="treeList">
								<div class="tlTop">川庆钻探单位</div>
								<div class="listSub" style="display:none;">
									<ul>
										<li>
											<div class="second">一警队</div>
											<div class="three">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">二警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">三警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">四警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<div class="treeList">
								<div class="tlTop">川庆钻探单位</div>
								<div class="listSub" style="display:none;">
									<ul>
										<li>
											<div class="second">一警队</div>
											<div class="three">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">二警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">三警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">四警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<div class="treeList">
								<div class="tlTop">川庆钻探单位</div>
								<div class="listSub" style="display:none;">
									<ul>
										<li>
											<div class="second">一警队</div>
											<div class="three">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">二警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">三警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
										<li>
											<div class="second">四警队</div>
											<div class="three" style="display:none;">
												<ol>
													<li><span></span>一警队A</li>
													<li><span></span>一警队B</li>
												</ol>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div> 
				<div class="logo"><img src="images/logo.png" alt="" /></div>
				<!-- 右侧 -->
				<div class="fr nav">
					<div class="menus fl">
						<ul class="ca cf">
							<li onclick="showRealTimeDiv()"><a href="">异常数据对比</a></li>
							<li class="active"><a href="">历史数据</a></li>
							<li><a href="">基础设置</a></li>
						</ul>
					</div>
                    <div class="setUp fl"></div>
                    <div class="notice fl"><span></span></div>
				</div>
			</div>
		</div>
		<!-- box 地图-->
		<div class="box">
			<div class="img" id="map"></div>
			<!-- 实时数据 -->
			<div class="realtime" onclick="showRealTimeDiv()">
				<p>实</p>
				<p>时</p>
				<p>数</p>
				<p>据</p>	
			</div>
            <div class="openData" id="realTimeDiv">
            	<div class="title ca cf" id="realTimeDivTop">
            		<div class="fl tlHeader">实时数据</div>
            		<div class="fl switchBox">
						<span class="witch">
		       				<label class="switch-btn">
								<input class="checked-switch" type="checkbox" checked="">
								<span class="text-switch" data-yes="yes" data-no="no"></span> 
								<span class="toggle-btn"></span> 
							</label>
		       			</span>
					</div>
					<div class="fl synchro"></div>
					<div class="retract" onclick="closeRealTimeDiv()"></div>
            	</div>
            	<div class="time">更新时间：2020-02-11 14:23:34</div>
            	<div class="gas">
            		<table  cellpadding="0" cellspacing="0" border="0" width="100%" class="gasTab">
            			<thead>
	            			<tr>
	            				<th><span></span></th>
	            				<th>设备号</th>
	            				<th>气体类型</th>
	            				<th>浓度</th>
	            			</tr>
            			</thead>
            			<!-- 表格头部固定，内容滚动，则需要js计算tbody距离屏幕的高度 -->
            			<tbody>
	            			<tr>
	            				<td><span class="green"></span></td>
	            				<td>001</td>
	            				<td>CO2</td>
	            				<td>28.88% LEL</td>
	            			</tr>
	            			<tr class="police">
	            				<td><span class="red"></span></td>
	            				<td>001</td>
	            				<td>CO2</td>
	            				<td>28.88% LEL</td>
	            			</tr>
	            			<tr>
	            				<td><span class="grey"></span></td>
	            				<td>001</td>
	            				<td>CO2</td>
	            				<td>28.88% LEL</td>
	            			</tr>
	            			<tr>
	            				<td><span class="green"></span></td>
	            				<td>001</td>
	            				<td>CO2</td>
	            				<td>28.88% LEL</td>
	            			</tr>
	            			<tr>
	            				<td><span class="yellow"></span></td>
	            				<td>001</td>
	            				<td>CO2</td>
	            				<td>28.88% LEL</td>
	            			</tr>
	            			<tr>
	            				<td><span class="electricity"></span></td>
	            				<td>001</td>
	            				<td>CO2</td>
	            				<td>28.88% LEL</td>
	            			</tr>
	            			<tr>
	            				<td><span class="green"></span></td>
	            				<td>001</td>
	            				<td>CO2</td>
	            				<td>28.88% LEL</td>
	            			</tr>
            			</tbody>
            		</table>
            	</div>
            </div>
			<!-- 历史数据 -->
			<>
			<!-- 安防物资 -->
			<div class="material">
				<p>安</p>
				<p>防</p>
				<p>物</p>
				<p>资</p>
			</div>
			<div class="materialData">
				<div class="mdTop">
					安防物资情况表
					<span class="stop"></span>
				</div>
				<div class="materialList">
					<table cellpadding="0" cellspacing="0" border="0" width="100%" class="materialTab">
						<thead>
							<tr>
								<th>序号</th>
								<th>名称</th>
								<th>数量</th>
								<th>是否正常</th>
							</tr>
						</thead>
						<!-- 表格头部固定，内容滚动，则需要js计算tbody距离屏幕的高度 -->
						<tbody>
							<tr>
								<td>1</td>
								<td>空气呼吸器</td>
								<td>122</td>
								<td>正常</td>
							</tr>
							<tr>
								<td>1</td>
								<td>空气呼吸器</td>
								<td>122</td>
								<td>正常</td>
							</tr>
							<tr>
								<td>1</td>
								<td>空气呼吸器</td>
								<td>122</td>
								<td>正常</td>
							</tr>
							<tr>
								<td>1</td>
								<td>空气呼吸器</td>
								<td>122</td>
								<td>正常</td>
							</tr>
							<tr>
								<td>1</td>
								<td>空气呼吸器</td>
								<td>122</td>
								<td>正常</td>
							</tr>
							<tr>
								<td>1</td>
								<td>空气呼吸器</td>
								<td>122</td>
								<td>正常</td>
							</tr>
							<tr>
								<td>1</td>
								<td>空气呼吸器</td>
								<td>122</td>
								<td>正常</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</body>
</html>